<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var name = '小王'
        var age = 17
        let obj = {
            name: '小张',
            objAge: this.age,
            myFun: function () {
                console.log(`${this.name}年龄${this.age}`) // 小张年龄undefined
            }
        }
        console.log(obj.objAge) // 17
        console.log(obj.myFun()) // 小张年龄undefined

        var fav = '孙尚香'
        function shows() {
            console.log(this.fav)
        }
        shows() // 孙尚香

        // 比较一下这两者this 的差别，第一个打印里面的this 指向obj，
        // 第二个全局声明的shows()函数   this 是window 

        // 1.call/apply/bind都是用来重定义this这个对象的
        var name_test = '小王'
        var age_test = 17
        let obj_test = {
            name_test: '小张',
            objAge_test: this.age_test,
            myFun: function () {
                console.log(`${this.name_test}年龄${this.age_test}`) // 宫本武藏年龄45
            }
        }
        var demo = {
            name_test: '宫本武藏',
            age_test: 45
        }
        obj_test.myFun.call(demo) // 宫本武藏年龄45
        obj_test.myFun.apply(demo) // 宫本武藏年龄45
        obj_test.myFun.bind(demo)() // 宫本武藏年龄45

        // 以上出了bind 方法后面多了个 () 外 ，结果返回都一致！
        // 由此得出结论，bind 返回的是一个新的函数，你必须调用它才会被执行

        // 2，对比call 、bind 、 apply 传参情况下
        var name_test_one = '小王'
        var age_test_one = 17
        let obj_test_one = {
            name_test_one: '小张',
            objAge_test_one: this.age_test_one,
            myFun: function (from,to) {
                console.log(`${this.name_test_one}年龄${this.age_test_one}，
                来自${from}去往${to}`)
            }
        }
        var contrast = {
            name_test_one: '宫本武藏',
            age_test_one: 45
        }
        obj_test_one.myFun.call(contrast,'广州','北京') // 宫本武藏年龄45来自广州去往北京
        obj_test_one.myFun.apply(contrast,['广州','北京']) // 宫本武藏年龄45来自广州去往北京
        obj_test_one.myFun.bind(contrast,'广州','北京')() // 宫本武藏年龄45来自广州去往北京

//         总结:
// 　　　　call 、bind 、 apply 这三个函数的第一个参数都是 this 的指向对象，第二个参数差别就来了：
// 　　　　call的参数是直接放进去的，第二第三第n个参数全都用逗号分隔，直接放到后面  obj.myFun.call(contrast,'成都', ... ,'string' )；
// 　　　　apply的所有参数都必须放在一个数组里面传进去  obj.myFun.apply(contrast,['成都', ..., 'string' ]);
// 　　　　bind除了返回是函数以外，它 的参数和call 一样。
// 　　　　
// 　　　　当然，三者的参数不限定是string类型，允许是各种类型，包括函数 、 object 等等！
    </script>
</head>

<body>

</body>

</html>